<template>
    <div class="cashDetail flexv">
        <!-- 头部 -->
        <pubHead title="积分明细" ></pubHead>

        <div class="lists flexv" v-if="!isNone">
            <van-list v-model="loading" :finished="finished" @load="getData">
                <div class="list jus-b ali-c" v-for="(item,index) in list" :key="index">
                    <div class="note flexv">
                        <p>{{item.memo}}</p>
                        <p class="time">{{item.createtime}}</p>
                    </div>

                    <span class="money" v-if="item.type == 0">-{{item.score}}</span>
                    <span class="money add" v-else>+{{item.score}}</span>
                </div>
            </van-list>
        </div>

        <!-- 空列表 -->
        <div class="empty_box flexc flexv" v-else>
            <img src="@/assets/distribution_empty.png" alt="">
            <p>还没有明细记录哦~</p>
        </div>

    </div>
</template>
<script>
import Vue from 'vue';
import { Toast, List } from 'vant';
import {  getScore } from '@/request/api';
import pubHead from '@/components/head';

Vue.use(Toast, List);
export default {
    data(){
        return{
            isNone: false,
            // 列表相关
            list: [],
            page: 0,
            pagesize: 15,
            loading: false,
            finished: false,
        }
    },
    components: {
        pubHead,
        "van-list": List,
    },
    created(){
        this.$loading();
    },
    methods: {
        getData(){
            this.loading = true;
            getScore({
                page: ++this.page,
                pagesize: this.pagesize,
                token: localStorage.getItem("token")
            }).then(res =>{
                Toast.clear();
                this.loading = false
                if(res.code == 1){
                    if(res.data.list.length > 0){
						console.log(res)
                        this.list = [...this.list,...res.data.list];
                    }

                    if(this.list.length < 1){
                        this.isNone = true
                    }else{
                        this.isNone = false;
                    }
                    this.finished = Number(res.data.list.length) >= Number(this.pagesize) ? false : true;
                }
            })
        },
    },
}
</script>
<style lang="less" scoped>
.cashDetail{
    min-height: 100vh;
    background-color: #f5f5f5;
    // 列表
    .lists{
        .list{
            height: 1.3rem;
            padding: 0 0.3rem;
            border-bottom: 1px solid #ededed;
            background-color: #fff;
            .note{
                font-size: 0.34rem;
                line-height: 120%;
                color: #333;
            }
            .time{
                margin-top: 0.14rem;
                font-size: 0.22rem;
                line-height: 120%;
                color: #999;
            }
            .money{
                font-size: 0.34rem;
                line-height: 120%;
                color: #D9122B;
            }
            .money.add{
                color: #333;
            }
        }
    }
    // 空列表
    .empty_box{
        height: calc(100vh - 0.88rem);
        img{
            width: 3.24rem;
            height: 3.06rem;
            margin: 0 auto;
        }
        p{
            margin-top: 0.4rem;
            font-size: 0.32rem;
            line-height: 120%;
            color: #999;
        }
    }
}
</style>